import Link from "next/link";
import Image from "next/image";
import { SiCrayon } from "react-icons/si";
import { IconType } from "react-icons/lib";

import { Badge } from "@/components/ui/badge";

import { cn } from "@/lib/utils";

type AssistItemProps = {
    data: {
        icon: IconType
        name: string
        description: string

        thumbnail: string
        type?: string
        subtitle?: string

        link: string
    },

    reverseLayout?: boolean
}

const AssistItem = ({ data, reverseLayout }: AssistItemProps) => {
    return (
        <div className={cn(
            "w-full flex flex-col md:flex-row items-center gap-y-8 md:gap-x-8",
            reverseLayout && "md:flex-row-reverse"
        )}>
            <div className={cn(
                "h-full flex-1 flex flex-col justify-start space-y-4",
            )}>
                <div className="flex items-center gap-x-2">
                    <data.icon className="h-8 w-8 " />
                    <h2 className="text-2xl font-bold">{data.name}</h2>
                </div>
                <p className="text-sm text-muted-foreground">{data.description}
                </p>
                <div className="flex items-center justify-between">
                    <Badge variant='secondary' className="text-muted-foreground">{data.type}</Badge>
                    <Link href={data.link} className="h-6 uppercase text-muted-foreground flex items-center border rounded-md px-2 hover:text-foreground hover:shadow-sm">
                        <SiCrayon className="mr-2 h-4 w-4" />
                        <span className="text-[10px]">explore</span>
                    </Link>
                </div>
            </div>

            <div className="max-md:hidden w-[300px] border rounded-md shadow hover:shadow-lg flex flex-col p-2">
                <Image
                    src={data.thumbnail}
                    alt="AI"
                    width={1200}
                    height={600}
                    className="w-[300px]"
                />
            </div>
        </div>
    )
}

export default AssistItem